<template>
   <view class="fixed-top-bar">
            <!-- 左侧区域：占1/3宽度 -->
            <view class=" top-left ">
                
                <text class="top-left-text" @click="goBack">&lt;</text>
            </view>
            <!-- 中间区域：占1/3宽度 -->
            <view class="top-item ">
                <text class="title">{{ Title }}</text>

            </view>
            <!-- 右侧区域：占1/3宽度 -->
            <view class=" top-right">
                <text class="top-right-text">☰</text>
            </view>
        </view>

</template>
<script setup lang="ts">
import { ref ,watch} from 'vue'

// 添加返回上一页的方法
const goBack = () => {
  // 调用UniApp提供的返回上一页API，类似于浏览器的后退按钮
  uni.navigateBack({
    delta: 1 // 返回的页面数，1表示返回上一页
  });
}
// 2. 定义props（接收父组件传递的数据）
const props = defineProps({
    title: {
        type: String,  // 指定数据类型为字符串
        default: '首页'    // 设置默认值为空字符串
    }
})
//3. 定义ref（用于存储数据）
const Title = ref('')
// 监听prop变化并更新本地ref（这相当于快递签收后把物品放到指定位置）
watch(() => props.title, (newTitle) => {
    Title.value = newTitle  // 将prop的值同步到本地ref
}, { immediate: true }) 



</script>
<style scoped>

.fixed-top-bar {
      width: 100%;  

  height: 60px;   /* 标题栏高度（根据实际调整） */
  background: #fff; /* 背景色 */
  z-index: 999;   /* 确保在最上层 */
  display: flex;  /* 内容居中 */
  align-items: center;
  /* justify-content: center; */
}



/* 三等分子项样式 */
.top-item {
    width: 100%;
    /* 每个子项平均分配宽度 */
    height: 100%;
    /* 高度占满父容器 */
    display: flex;
    /* 子项内部使用flex布局 */
    justify-content: center; 
  align-items: center; 
}

.top-left{
    justify-content: flex-start;
    padding-left: 0; /* 确保无左内边距，元素移动到最左边 */
}
/* 返回按钮样式 */
.top-left-text {
    font-size: 40px;
    color: #333;
    line-height: 60px;
    margin-left: 20px;
}

.top-title {
    display: flex;
    justify-content: center;
    line-height: 60px;
}

/* 标题文本样式 */
.title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
     text-align: center;
}

.top-right {
    justify-content: flex-end;
    /* 子元素靠右对齐 */
    padding-right: 20px;
    /* 右侧留出边距 */
}

/* 右侧文本样式 */
.top-right-text{
    font-size: 30px;
    color: #333;
    right: 0px;
}
</style>
